<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/workOrder.css" />

	</head>

	<body style="background-color: #f8fafc;">
		<div class="bottom-bow"></div>
		<div id="workOrder">
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">工单</h1>
			</header>
			<div class="tab-list">
				<div class="list-item" v-for="(item,index) in tabList" @click="tabListClick(index)" :style="num==index?'color:#2A83FF;':''">{{item}}</div>
				<div class="tab-icon" :style="left"></div>
			</div>
			<div class="mui-content">
				<div id="refreshContainer" class="list-container mui-scroll-wrapper" style="top: 2.3466666667rem;">
					<div class="mui-scroll">
						<div class="list-item" v-for="item in dataList" @click="orderDetails(item)" v-tap="vuetouch" v-swipeleft="{fn:vuetouch,name:'left',rouID:item.rouID}" v-swiperight="{fn:vuetouch,name:'right',rouID:item.rouID}">

							<div class="item-type" style=" box-shadow: 0 0 0 1px #2AC845; color: #2AC845;" v-if="item.rouType==1">例行任务</div>
							<div class="item-type" style="box-shadow: 0 0 0 1px #FF5D5D;color: #FF5D5D;" v-else-if="item.rouType==2">临时任务</div>
							<div class="item-type" style=" box-shadow: 0 0 0 1px #2A83FF; color: #2A83FF;" v-else-if="item.rouType==3">业主报修</div>
							<div class="item-type" style=" box-shadow: 0 0 0 1px #FFAC38; color: #FFAC38;" v-else-if="item.rouType==4">报事</div>
							<div class="item-title">{{item.rouName}}</div>

							<div class="item-desc">
								<span v-if="item.rouType!==4">{{item.rouDetails}}</span>
								<span>{{item.rouCD}}</span>
							</div>
							<!--<div class="item-designate" :style="item.state?'right: 0':'right: -150px'" @click.stop="designateClick">
								指派任务
							</div>-->
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/silde.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false, //启用右滑关闭功能
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			mui.plusReady(function() {
				FastClick.attach(document.body);
				var self = plus.webview.currentWebview();
				var num = self.name;
				workOrder.num = num
				workOrder.left = num == 0 ? 'left:7%' : num == 1 ? 'left:41%' : 'left:74%';
				self.addEventListener('show', function() {
					loadMoreData()
				})
			})

			var workOrder = new Vue({
				el: '#workOrder',
				data: {
					num: 0,
					index: 0,
					left: 'left:8%;',
					tabList: [
						'待办事项',
						'审核事项',
						'完成事项'
					],
					dataList: []
				},

				methods: {
					tabListClick: function(id) {
						this.num = id
						this.index = 0
						this.dataList = []
						loadMoreData()
					},

					orderDetails: function(item) {
						var data = {
							rouID: item.rouID,
							rouType: item.rouType,
							gtaID: item.gtaID
						}
						if(this.num == 0){
							data.stand = 0
						} else if (this.num == 2) {
							data.sate = 007
						}
						mui.openWindow({
							url: 'orderDetails/index.html',
							id: 'orderDetails/index.html',
							extras: data,
							waiting: {
								autoShow: false
							}
						});
					},

					vuetouch: function(s, e) { // 滑动事件
						var dataList = this.dataList

						dataList.forEach(function(son, index) {
							if(son.rouID == s.rouID) {
								if(s.name == 'left') {
									son.state = true
								} else if(s.name == 'right') {
									son.state = false
								}
							}
						})
						this.dataList = dataList
					},
					designateClick: function() { // 指派任务
						plus.nativeUI.confirm("您要指派任务吗？", function(e) {
							if(e.index == 0) {
								mui.alert('指派成功！')
							}
						});
					}
				}
			});

			window.addEventListener('refresh', function(e) { //执行刷新
				refreshData();
			});

			function refreshData() {
				var gtaState

				if(workOrder.num == 0) {
					gtaState = 1
					workOrder.left = 'left:7%;'
				} else if(workOrder.num == 1) {
					gtaState = 3
					workOrder.left = 'left:41%;'
				} else {
					gtaState = 4
					workOrder.left = 'left:74%;'
				}
                
				mui.post(httpUrl.testUrl + '/api/Gtasks/GetGtasks', {
					userID: plus.storage.getItem("userID"),
					gtaState: gtaState,
					currentPage: 1,
					currentNumber: 10
				}, function(res) {
					if(res.code == 1001) {

						workOrder.dataList.splice(0, workOrder.dataList.length);
						workOrder.dataList = workOrder.dataList.concat(addstate(res.data));
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
						mui('#refreshContainer').pullRefresh().refresh(true);
						mui.toast('刷新成功')
					} else {
						mui.toast('请求错误')
					}
				})
			}

			function loadMoreData() {
				workOrder.index++
					var gtaState

				if(workOrder.num == 0) {
					gtaState = 1
					workOrder.left = 'left:7%;'
				} else if(workOrder.num == 1) {
					gtaState = 3
					workOrder.left = 'left:41%;'
				} else {
					gtaState = 4
					workOrder.left = 'left:74%;'
				}

				mui.post(httpUrl.testUrl + '/api/Gtasks/GetGtasks', {
					userID: plus.storage.getItem("userID"),
					gtaState: gtaState,
					currentPage: workOrder.index,
					currentNumber: 10
				}, function(res) {
					if(res.code == 1001) {
						workOrder.dataList = workOrder.dataList.concat(addstate(res.data));
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(workOrder.dataList.length > res.data);
					} else {
						mui.alert('请求错误')
					}
				})
			}

			function addstate(Array) {
				Array.forEach(function(item, num) {
					item.state = false
				})
				return Array
			}
		</script>
	</body>

</html>